<template>
  <div>
    <Button   type="primary" @click="longdao = true" >添加服务</Button>
    <Drawer
        title="添加项目"
        v-model="longdao"
        width="700"
        :mask-closable="true"
        :styles="styles"
        @on-close="handleClose"
    >
      <Form  ref="myForm" :model="formData"  :rules="ruleValidate">
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="模块名称" label-position="top"  prop="ModuleName">
              <Input v-model="formData.ModuleName" placeholder="输入模块名称" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="研发人员" label-position="top" prop="DevelopName">
              <Input v-model="formData.DevelopName" placeholder="研发人员" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="服务名称" label-position="top" prop="ServerName">
              <Input v-model="formData.ServerName" placeholder="服务名称" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="代码修改" label-position="top" prop="Isedit">
              <Select   v-model="formData.Isedit" placeholder="代码修改">
                <Option value="未修改">未修改</Option>
                <Option value="已修改">已修改</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="代码部署" label-position="top" prop="Isdeploy">
              <Select   v-model="formData.Isdeploy" placeholder="代码修改">
                <Option value="未部署">未部署</Option>
                <Option value="已部署">已部署</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="分支名称" label-position="top" prop="BranchName">
              <Input v-model="formData.BranchName" placeholder="分支名称" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="longdao = false;" >取消</Button>
        <Button type="primary" @click="saveServiceData">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: 'AddService',
  inject: ['reload'],
  data() {
    return {
      longdao: false, //控制抽屉的显示和隐藏
      company: this.$route.query.company, // 获取company参数

      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {
        ModuleName: '',
        DevelopName: '',
        ServerName: '',
        Isedit: '未修改',
        Isdeploy: '未部署',
        BranchName: '',
      },
      ruleValidate: {
        ModuleName: [{required: true, message: '主机名称不能为空', trigger: 'blur'}],
        DevelopName: [{required: true, message: '研发人员不能为空', trigger: 'blur'}],
        ServerName: [{required: true, message: '服务名称不能为空', trigger: 'blur'}],
        Isedit: [{required: true, message: '选项不能为空', trigger: 'blur'}],
        Isdeploy: [{required: true, message: '选项不能为空', trigger: 'blur'}],
        BranchName: [{required: true, message: '分支不能为空', trigger: 'blur'}],

      }
    }
  },

  methods: {
    background(type) {
      this.$Message[type]({
        background: true,
        content: type === 'success' ? '添加成功' : '添加失败'
      });
    },
    handleClose() {
      this.formData = {}; // 清空表单数据
    },
    saveServiceData() {
      this.$refs['myForm'].validate((valid) => {
        if (valid) {
          axios.post(`http://172.30.53.223:8888/api/projectlist/addservice?company=${this.company}`, this.formData)
              .then(() => {
                // 数据保存成
                this.background('success');
                this.longdao = false;
                this.$refs.myForm.resetFields();
                this.reload()
              })
              .catch(error => {
                // 处理错误
                console.error(error);
                this.background('error');
              });
        } else {
          // 表单验证不通过的逻辑
          return; // 阻止提交操作
        }
      });
    },
  }
}
</script>
<style>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
